<template>
  <div class="wrap">
    <AutoList :request="getStudioList" :show-on-get-data="false" @list=" studioList = $event">
      <div
        v-for="d in studioList"
        :key="d"
        class="studio"
      >
        <div class="name">{{ d.companyName }}</div>
        <LabelAndValue :value="d.taxID" label="统一社会信用代码" label-width="300" />
        <LabelAndValue :value="d.companyArea" label="注册地" label-width="150" />
        <LabelAndValue :value="d.validate?.slice(0, 10)" label="注册时间" label-width="150" />
        <LabelAndValue :value="d.companyAddress" label="注册地址" label-width="150" />
        <LabelAndValue :value="d.scope" label="经营范围" label-width="150" />
      </div>

      <template #mbbox>
        <div class="tip">
          <div style="color: #595959">友情提示</div>
          <div>1.工作室实质是个体工商户，经营范围: 市场推广、信息咨询服务。</div>
          <div>2.工作室服务内容: 品牌宣传、业务推广、售后服务，客户陪同、客户全程关怀等。</div>
        </div>
      </template>
    </AutoList>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import AutoList from '@C/AutoList.vue'
import LabelAndValue from '@C/LabelAndValue.vue'
import type { IObj } from '@/interface'

import { getStudioList } from './request'

// 工作室列表
const studioList = ref(<Array<IObj>>[])

</script>

<style lang="less" scoped>
.wrap {
  padding: 32rpx 24rpx 0;
  .studio {
    //margin: 32rpx 24rpx 28rpx;
    margin-bottom: 28rpx;
    border-radius: 20px;
    background: white;
    overflow: hidden;
    .name {
      font-size: 28rpx;
      width: calc(100% - 58rpx);
      margin: auto;
      padding: 24rpx 0;
      border-bottom: solid 2rpx #e5e5e5;
    }
  }
  .tip {
    font-size: 24rpx;
    color: #8c8c8c;
    line-height: 48rpx;
    padding: 0 24rpx 100rpx;
  }
}
</style>
